<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绘制矩形</title>
    <script type="application/javascript">
        function draw() {
            const canvas = document.getElementById('canvas');
            const ctx = canvas.getContext('2d');

            // 绘制一个简单的填充矩形
            ctx.fillStyle = 'blue';
            ctx.fillRect(20, 10, 150, 100);

            // 绘制一个简单的边框矩形
            ctx.strokeStyle = 'blue';
            ctx.strokeRect(20, 10, 160, 100);

            // 绘制一个带有阴影和粗斜面轮廓的矩形
            ctx.shadowColor = 'yellow';
            ctx.shadowBlur = 10;
            ctx.lineJoin = 'bevel';
            ctx.lineWidth = 15;
            ctx.strokeStyle = '#38f';
            ctx.strokeRect(30, 30, 200, 100);

            // 清除整个画布（效果未在下图展示）
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            // 清除一部分画布
            // 绘制黄色背景
            ctx.beginPath();
            ctx.fillStyle = '#ff6';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.clearRect(10, 10, 120, 100);
        }
    </script>
</head>

<body onload="draw();">
    <canvas id="canvas"></canvas>
</body>

</html>